<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 500px;
            height: 100px;
            background: pink;
            list-style: none;
            margin: 0 auto;
        }
        li {
            width: 20%;
            background: skyblue;
            /* 浮动 */
            float: left;
            text-align: center;
            margin-right: 20px;
        }
        li a {
            color: #000;
            text-decoration: none;
            line-height: 3;
        }
        .fd {
            width: 100px;
            height: 100px;
            background: plum;
            float: left;
            margin: 0 10px;
        }
        /* 前伪元素 */
        .ba {
            width: 100px;
            height: 100px;
            background: peru;
        }
        .ba::before {
            content: "哈哈";
            font-size: 30px;
            background: palevioletred;
        }
        .ba::after {
            content: "你过来呀";
            font-size: 40px;
            background: rgb(13, 243, 116);
        }
    </style>
</head>
<body>
    <!-- clearfix 清除浮动 -->
    <ul class="clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">我的</a></li>
        <p>123</p>
        <div>asdas</div>
    </ul>
    <div style="background: palegreen;">123维萨地方GV嫡女会计师吃吧凯撒</div>
    <!-- 浮动 清除浮动 -->
    <div class="box2 clearfix">
        <div class="fd ">一</div>
        <div class="fd">二</div>
        <div class="fd">三</div>
        <div class="fd">四</div>
        <div class="fd">五</div>
    </div>

    <!-- 前伪元素 -->
    <div class="ba">前伪元素</div>
</body>
</html>